<template>
  <div class="home">
    <header class="clearfix">
      <div class="bg" :style="{opacity:opacity,cssText:cssText}"></div>
      <!-- logo -->
      <div class="logo ">
        <h1><a class="link" href="/Index" title="国富通">国富通</a></h1>
      </div>
      <!-- 导航 -->
      <MenuItem :lists="lists" />
      <!-- <el-menu :router="true"
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect">
        <template v-for="(item,index) in lists">
          <el-submenu v-if="item.children" :index="'/'+item.path+''" :key="index">
            <template slot="title">{{item.name}}</template>
            <el-menu-item :index="'/'+item.path+'/'+subItem.path+''"
              :key="subIndex"
              v-for="(subItem,subIndex) in item.children">
              {{subItem.name}}
            </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :index="'/'+item.path+''" :key="index">
            <template slot="title">{{item.name}}</template>
          </el-menu-item>
        </template>
      </el-menu> -->
    </header>
    <router-view></router-view>
    <footer>
      <div class="container clearfix">
        <!-- 左侧 -->
        <div class="left">
          <!-- 标题 -->
          <div class="title">
            <h1>guofutong</h1>
          </div>
          <!-- 内容 -->
          <div class="content">
            <p>（XXXXXXXXXX注册成立的有限责任公司）</p>
            <p>地址：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
            <p>电话：XXX-XXX-XXXX</p>
            <p>XXXXXXXXXXXXXXXX</p>
            <p>XXXXXXXX</p>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <MenuItem :lists="lists" />
        </div>
      </div>
    </footer>
    <div class="icp">
      <div class="content">
        国富通有限公司 Copyright © 2019 CHINA GUOFUTONG 版权所有.浙ICP备19052713号
      </div>
    </div>
    <Backtop
      transitionName="fade"
      :customStyle="myBackToTopStyle"
      :visibilityHeight="100"
      :backPosition="0">
      <div slot="content">
        <i style="font-size: 35px;line-height:17px;" class="el-icon-caret-top"></i>
        <div style="display-inline-block;padding:0 10px;">返回顶部</div>
      </div>
    </Backtop>
  </div>
</template>

<script>
// @ is an alias to /src

import MenuItem from '@/components/menu-item.vue';
import Backtop from '@/components/back-top.vue';

export default {
  name: 'GFHome',
  components: {
    MenuItem,
    Backtop
  },
  mounted () {
    window.addEventListener('scroll', this.setOpacity); // 绑定页面的滚动事件
  },
  data () {
    return {
      opacity: 0,
      cssText: '',
      myBackToTopStyle: {
        right: '0',
        bottom: '150px',
        width: '70px',
        height: '70px',
        'font-size': '17px',
        'border-bottom-left-radius': '20px',
        'line-height': '20px',
        background: '#fff'
      },
      activeIndex: '1',
      lists: [
        { name: '首页', id: 'Index', path: 'Index' },
        {
          name: '关于我们',
          id: 'About',
          path: 'About',
          children: [
            { name: '公司简介', path: 'Introduce' },
            { name: '公司历程', path: 'History' },
            { name: '公司理念', path: 'Concept' },
            { name: '管理架构', path: 'Management' }
          ]
        },
        {
          name: '产品中心',
          id: 'Product',
          path: 'Product',
          children: [
            { name: '管道产业', path: 'Pipeline' },
            { name: '家居水暖', path: 'Plumbing' },
            { name: '钢筋建材', path: 'Building' }
          ]
        },
        {
          name: '服务中心',
          id: 'Service',
          path: 'Service',
          children: [
            { name: '配送服务', path: 'Transport' },
            { name: '产品介绍', path: 'ProductIntro' },
            { name: '联系我们', path: 'ContactUs' }
          ]
        },
        {
          name: '最新消息',
          id: 'News',
          path: 'News',
          children: [
            { name: '产品信息', path: 'Quotation' },
            { name: '公司信息', path: 'CompanyInfo' }
          ]
        },
        { name: '加入我们', id: 'Join', path: 'Join', children: [{ name: '招贤纳士', path: 'JoinUs' }] },
        { name: '会员中心', id: 'Vip', path: '#' }
      ]

    };
  },
  methods: {
    // handleSelect (key, keyPath) {
    //   console.log(key, keyPath);
    // }
    setOpacity () {
      if (this.getTop() <= 200) {
        this.opacity = (this.getTop() / 200);
      } else {
        // this.opacity = 1;
        // console.log('1');
        this.cssText = 'box-shadow: 0 1px 5px 0px #999999;opacity:1;';
      };
    },
    getTop () {
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      return scrollTop;
    }
  }
};
</script>

<style lang="scss">
.home {
  /* 整个页面最小宽度是1200px */
  min-width: 1200px;
}
header {
  .bg {
    background-color: #fff;
    width: 100%;
    padding: 40px 0;
    position: absolute;
    top: 0;
    opacity: 0;
  }
  position: fixed;
  z-index: 2;
  width: 100%;
  padding: 40px 0;
  .logo {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translate(-0%, -50%);

    color: var(--themeAColor);
    vertical-align: middle;
  }
  // 整个导航
  .nav-item1 {
    display: inline-block;

    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-0%, -50%);
    // 每个一级导航
    .item-box1 {
      // 一级导航展示文字
      float: left;
      padding: 0 32px; // 撑开每一个li的宽度然后让子导航能够加入padding值撑开
      margin: 0 0px;
      font-size: 16px;
      position: relative;
      border: 1px solid transparent;
      // a {}
      &:hover {
        border-bottom: 1px solid var(--themeAColor);
        .nav-item2 {
          visibility: visible;
          opacity: 1;
        }
      }
      // 二级导航的盒子
      .nav-item2 {
        position: absolute;
        left: 0;
        top: 40px;
        z-index: 2;
        border: 1px solid #ccc;
        box-sizing: border-box;
        opacity: 0;
        visibility: hidden;
        transition: 0.5s;
        // 每个二级导航
        .item-box2 {
          // 每个二级导航的内容文字
          a {
            display: inline-block;
            padding: 10px 30px;
            background-color: #fff;
            border-bottom: 2px solid #ccc;
            &:hover {
              border-bottom: 2px solid var(--themeAColor);
            }
          }
        }
      }
    }
  }
  // #region 修改elemnt导航样式
  .el-menu {
    float: right;
    background: none;
    margin: 10px;
  }
  /* 整体的下划线进行隐藏 */
  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }

  /* 点击出来的下划线 */
  .el-menu--horizontal {
    & > .el-menu-item.is-active {
      border-bottom: 2px solid var(--themeAColor);
    }
    & > .el-submenu.is-active .el-submenu__title {
      border-bottom: 2px solid var(--themeAColor);
    }
  }
  /* 导航选中时候的样式 */
  .el-menu-item .is-active {
    color: var(--themeAColor);
  }
  .el-menu-item.is-active {
    color: var(--themeAColor);
  }
  /* 水平菜单子菜单中的所有菜单项 */
  .el-menu--horizontal .el-menu .el-menu-item {
    float: none;
    height: 23px;
    line-height: 23px;
    width: auto;
    color: var(--themeAColor);
  }
  .el-menu--horizontal .el-menu .el-menu-item {
    height: 23px;
    line-height: 23px;
    width: auto;
  }
  // #endregion
}
/* 底部css */
footer {
  width: 100%;
  background: #4e4e4e;
  // footer 限定内部的宽度，内容自己撑开
  .container {
    padding: 40px 40px 80px;
    color: var(--footFontColor);
    .left {
      float: left;
    }
    .right {
      float: right;
      .nav-item1 {
        .item-box1 {
          float: left;
          padding: 0 20px;
          & > a {
            color: #ffffff;
            margin: 0 0;
          }
        }
      }
      .item-box2 {
        text-align: center;
        margin: 10px 0;
        a {
          color: var(--footerFontColor);
          font-size: 12px;
          &:hover {
            color: #999999;
          }
        }
      }
    }
    .title {
      color: #ffffff;
    }
  }
}
.icp {
  width: 100%;
  background: #4e4e4e;
  text-align: center;
  .content {
    padding: 30px;
    color: var(--footFontColor);
  }
}
</style>
